<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/shoplist.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="loading" v-show="!loading">
			<div class="load"></div>
			<div class="load2"></div>
		</div>
		
		<div class="header" onclick="history.go(-1)">
			<i class="icon Hui-iconfont">&#xe67d;</i>
			<span>美食</span>
			<!--标题为动态获取-->
		</div>
		<div class="filter-header">
			<div class="filter-nav">
				<span>
					分类
				</span>
			</div>|
			<div class="filter-nav">
				<span>
					排序
				</span>
			</div>|
			<div class="filter-nav">
				<span>
					筛选
				</span>
			</div>
		</div>

		<!--商家列表-->
		<div class="shoplist">
			<div class="index-container" v-for="item in shop" @click="targetShopmain($index)">
				<div class="index-container-img">
					<!--logo图-->
					<img :src="item.img" />
				</div>
				<div class="index-container-main">
					<div class="index-container-name" v-html="item.name">
						<!--商店名-->
					</div>
					<div class="index-rateWrap">
						<!--评价以及月销售-->
						<i class="icon Hui-iconfont star" v-for="items in item.grade">&#xe6ff;</i> 月售{{item.ratewarp}}单
					</div>
					<div class="index-moneylimit">
						<!--起送价，配送费-->
						{{item.moneylimit}}元起送/配送费{{item.sendprice}}元
					</div>
				</div>
			</div>
		</div>
		<!--分类-->
		<div class="filter-extend">
			<div class="filter-scroller">
				<ul>
					<li>
						<span>美食</span>
						<span class="count">323</span>
					</li>
					<li v-for="item in listle" @click="cli1($index)" v-bind:class="{active:item.hidden}">
						<img :src="item.img" class="icon" />
						<span v-html="item.name">快餐便当</span>
						<span class="count" v-html="item.num">323</span>
						<i class="icon Hui-iconfont arrow">&#xe6d7;</i>
					</li>

				</ul>
				<!--具体的菜系，动态生成-->
				<ul style="overflow: auto;" v-for="(index1,item) in listri" v-if="listle[$index].hidden">
					<li v-for="item1 in item" @click="select(index1,$index)">
						<span v-html="item1.name">简餐</span>
						<span class="count" v-html="item1.num">122</span>
					</li>
				</ul>

			</div>
		</div>
		<div class="filter-extend">
			<ul>
				<li>智能排序</li>
				<li @click="startprice">起送价最低</li>
				<li @click="grade">评分最高</li>
				<li @click="ratewarp">销量最高</li>
			</ul>
		</div>
		<div class="filter-extend">
			<div class="Merattr">
				<div>商家属性(可多选)</div>
				<div class="btnsear">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<div class="btn">
				<input type="button" id="clear" value="清空" />
				<input type="button" id="sure" value="确定" />
			</div>
		</div>
		<div class="filter-modal"></div>
	</body>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shoplist.js" type="text/javascript" charset="utf-8"></script>

</html>